<template>
  <div class="notepad">
    <h2>记事本</h2>
    <input
      type="text"
      placeholder="请输入内容。。。。"
      v-model="notepad.content"
      @keyup.enter="save"
    />
    <div>
      <div>
        <h3>未完成任务</h3>
        <ul>
          <li v-for="n in getUnfinished" :key="n.id">
            {{ n.content }} - 创建时间:
            {{ n.createTime | formatDate }}
            <button @click="okClick(n.id)">完成</button>
            <button @click="deleteNote(n.id)">删除</button>
            <button @click="cancelNote(n.id)">取消</button>
          </li>
        </ul>
      </div>
      <div>
        <h3>已完成任务</h3>
        <ul>
          <li v-for="n in getFinished" :key="n.id">
            {{ n.content }} - 完成时间:
            {{ n.updateTime | formatDate }}
          </li>
        </ul>
      </div>
      <div>
        <h3>已取消任务</h3>
        <ul>
          <li v-for="n in getCancel" :key="n.id">
            {{ n.content }} - 类型: {{ n.type }} - 创建时间:
            {{ n.createTime | formatDate }}
            <button @click="restoreNote(n.id)">恢复</button>
            <button @click="deleteNote(n.id)">删除</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      cid: 1, // 启始Id
      notepad: {
        id: "",
        content: "",
        type: "",
        createTime: "",
        updateTime: "",
      }, // 记事本
      notepads: [], // 记事本的数据集合
    };
  },
  created() {
    // 组件创建时从localStorage加载数据
    const storedNotepads = localStorage.getItem('notepads');
    if (storedNotepads) {
      this.notepads = JSON.parse(storedNotepads);
      this.cid = this.notepads.length > 0 ? Math.max(...this.notepads.map(n => n.id)) + 1 : 1;
    }
  },
  methods: {
    // 点击完成按钮
    okClick(id) {
      const index = this.notepads.findIndex((n) => n.id === id);
      if (index !== -1) {
        const updatedNote = {
          ...this.notepads[index],
          type: 2,
          updateTime: new Date(),
        };
        this.notepads.splice(index, 1, updatedNote);
      }
      this.saveToLocalStorage();
    },
    // 点击取消按钮
    cancelNote(id) {
      const index = this.notepads.findIndex((n) => n.id === id);
      if (index !== -1) {
        const updatedNote = { ...this.notepads[index], type: 3 };
        this.notepads.splice(index, 1, updatedNote);
      }
      this.saveToLocalStorage();
    },
    // 点击恢复按钮
    restoreNote(id) {
      const index = this.notepads.findIndex((n) => n.id === id);
      if (index !== -1) {
        const updatedNote = { ...this.notepads[index], type: 1 };
        this.notepads.splice(index, 1, updatedNote);
      }
      this.saveToLocalStorage();
    },
    // 点击删除按钮
    deleteNote(id) {
      const index = this.notepads.findIndex((n) => n.id === id);
      if (index !== -1) {
        this.notepads.splice(index, 1);
      }
      this.saveToLocalStorage();
    },
    // 保存数据到localStorage
    saveToLocalStorage() {
      localStorage.setItem('notepads', JSON.stringify(this.notepads));
    },
    // 保存新的笔记
    save() {
      if (this.notepad.content === "") {
        alert("请输入记录内容！");
      } else {
        this.notepad.id = this.cid;
        this.notepad.type = 1; // 1:未完成  2：已完成  3：已取消
        this.notepad.createTime = new Date().toLocaleString();
        this.notepads.push({ ...this.notepad });
        this.notepad = {}; // 清空数据
        this.cid++; // id自增
        this.saveToLocalStorage();
      }
    },
  },
  computed: {
    getUnfinished() {
      return this.notepads.filter((n) => n.type === 1);
    },
    getFinished() {
      return this.notepads.filter((n) => n.type === 2);
    },
    getCancel() {
      return this.notepads.filter((n) => n.type === 3);
    },
  },
  filters: {
    formatDate(date) {
      return new Date(date).toLocaleString();
    },
  },
};
</script>

<style lang="less" scoped>
.notepad {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;

  h2 {
    text-align: center;
  }

  input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
  }

  ul {
    list-style-type: none;
    padding: 0;

    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      button {
        margin-left: 10px;
      }
    }
  }
}
</style>